<template>
  <el-form label-position="right">
    <el-form-item label="数据源" label-width="80px">
      <el-select
        size="medium"
        v-model="syncDataSourceId"
        @change="updateSyncList"
      >
        <el-option
          v-for="item in dataSourceList"
          :key="item.key"
          :label="item.value"
          :value="item.key"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="同步对象" class="sync" label-width="80px">
      <div class="table-item">
        <div class="table-item-left">
          <label class="list-label"> 待选列表</label>
          <table-list
            :tableList="constraintList"
            :typeList="typeList"
            @changeSyncList="changeConstraintList"
            @changeSelected="getConstraintListSelected"
            ref="constraintList"
          ></table-list>
        </div>
        <div class="table-item-center">
          <div>
            <el-button
              class="transfer-btn"
              icon="el-icon-right"
              type="primary"
              @click="forwardTransfer"
            ></el-button>
          </div>
          <div>
            <el-button
              class="transfer-btn"
              icon="el-icon-back"
              type="primary"
              @click="reverseTransfer"
            ></el-button>
          </div>
        </div>
        <div class="table-item-right">
          <label class="list-label"> 已选列表</label>
          <table-list
            :tableList="selectedList"
            :typeList="typeList"
            @changeSyncList="changeSelectedList"
            @changeSelected="getSelectedListSelected"
            ref="selectedList"
          ></table-list>
        </div>
      </div>
    </el-form-item>
    <el-form-item align="center">
      <div class="dialog-btn">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="saveTransfer">保存</el-button>
      </div>
    </el-form-item>
  </el-form>
</template>
<script>
import TableList from "./tableList.vue";
import { mapState, mapMutations } from "vuex";
export default {
  name: "DataSource",
  components: { TableList },
  data: () => {
    return {
      dataSourceList: [], // 数据源列表
      syncDataSourceId: 0, // 选择的数据源id
      origin_constraintList: [], // 所有待选列表
      origin_selectedList: [], // 所有已选列表
      constraintList: [], // 筛选后待选列表
      selectedList: [], // 筛选后已选列表
      selectedName: "", // 名称
      selectedRemark: "", // 备注
      selectedType: "", // 类型
      typeList: [], // 类型列表
      constraintListSelected: [], // 待选中选中项
      selectedListSelected: [], // 已选中选中项
      saveDisabled: true,
    };
  },
  computed: {
    ...mapState({
      taskId: (state) => state.dataCollection.taskId,
      dataSourceId: (state) => state.dataCollection.dataSourceId,
      conifgBoxIsOpen: (state) => state.dataCollection.conifgBoxIsOpen,
      currentTab: (state) => state.dataCollection.currentTab,
    }),
  },
  created() {
    this.syncDataSourceId = this.dataSourceId;
    this.getAllDataSource();
    this.getAllTypeList();
    this.updateSyncList();
  },
  methods: {
    ...mapMutations({
      toggleCurrentTab: "dataCollection/toggleCurrentTab",
      setDataSourceId: "dataCollection/setDataSourceId",
      toggleConfigBoxDialog: "dataCollection/toggleConfigBoxDialog",
    }),
    // 数据源列表
    getAllDataSource() {
      let params = {
        code: "source_base",
        source: 3,
      };
      this.$axios
        .post(this.$api.dataCollection.getAllSourceList, params)
        .then((res) => {
          let { code, message, data } = res.data;
          if (code !== 200) {
            this.$message.warning(message);
            return;
          } else {
            this.dataSourceList = data;
            // console.log("dataSourceList", data);
          }
        });
    },
    // 类型列表
    getAllTypeList() {
      this.typeList = [
        {
          id: 0,
          name: "表",
        },
      ];
      // this.$axios
      //   .post(this.$api.dataCollection.getAllTypeList)
      //   .then((res) => {
      //     let { code, message, data } = res.data;
      //     if (code !== 200) {
      //       this.$message.warning(message);
      //       return;
      //     }
      //     this.typeList = data;
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
    },
    getSyncConstraintListAndSelectedList() {
      let params = {
        taskId: this.taskId,
        dataSourceId: this.syncDataSourceId,
      };
      return this.$axios
        .post(
          this.$api.dataCollection.getSyncConstraintListAndSelectedList,
          params
        )
        .then((res) => {
          let { code, message, data } = res.data;
          if (code == 4001) {
            throw Error(JSON.stringify({ code, message }));
          }
          if (code !== 200) {
            this.$message.warning(message);
            return;
          }
          this.origin_constraintList = this.constraintList = data.unChooseList;
          this.origin_selectedList = this.selectedList = data.chooseList;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 切换源数据
    updateSyncList() {
      this.getSyncConstraintListAndSelectedList().then(() => {
        this.$refs.constraintList.resetParams();
        this.$refs.selectedList.resetParams();
      });
    },
    // 查询待选列表
    changeConstraintList(params) {
      let { selectedName, selectedRemark, selectedType } = params;
      this.constraintList = [];
      this.origin_constraintList.forEach((item) => {
        if (
          item.name.includes(selectedName) &&
          item.remark.includes(selectedRemark) &&
          (item.typeId == selectedType || selectedType == 0)
        ) {
          this.constraintList.push(item);
        }
      });
    },
    // 查询已选列表
    changeSelectedList(params) {
      let { selectedName, selectedRemark, selectedType } = params;
      this.selectedList = [];
      this.origin_selectedList.forEach((item) => {
        item.remark = item.remark ? item.remark : "";
        if (
          item.name.includes(selectedName) &&
          item.remark.includes(selectedRemark) &&
          (item.typeId == selectedType || selectedType == 0)
        ) {
          this.selectedList.push(item);
        }
      });
    },
    // 待选选中
    getConstraintListSelected(selected) {
      this.constraintListSelected = selected;
    },
    // 已选选中
    getSelectedListSelected(selected) {
      this.selectedListSelected = selected;
    },
    // 正向穿梭
    forwardTransfer() {
      this.constraintListSelected.forEach((selected) => {
        let name = selected.name;
        let _delIndex = this.origin_constraintList.findIndex(
          (item) => item.name === name
        );
        let delIndex = this.constraintList.findIndex(
          (item) => item.name === name
        );
        this.origin_constraintList.splice(_delIndex, 1);
        this.constraintList.splice(delIndex, 1);
      });
      this.selectedList.push(...this.constraintListSelected);
      this.origin_selectedList.push(...this.constraintListSelected);
      this.$refs.constraintList.resetParams();
    },
    // 反向穿梭
    reverseTransfer() {
      this.selectedListSelected.forEach((selected) => {
        let name = selected.name;
        let _delIndex = this.origin_selectedList.findIndex(
          (item) => item.name === name
        );
        let delIndex = this.selectedList.findIndex(
          (item) => item.name === name
        );
        this.origin_selectedList.splice(_delIndex, 1);
        this.selectedList.splice(delIndex, 1);
      });
      this.constraintList.push(...this.selectedListSelected);
      this.origin_constraintList.push(...this.selectedListSelected);
      this.$refs.selectedList.resetParams();
    },
    // 关闭
    closeDialog() {
      this.toggleConfigBoxDialog(false);
    },
    saveTransfer() {
      let syncObjectList = this.selectedList.map((item) => {
        return {
          syncObject: item.name,
          tableType: item.status,
        };
      });
      let params = {
        taskId: this.taskId,
        syncDataSourceId: this.syncDataSourceId,
        syncObjectList,
      };
      this.$axios
        .post(this.$api.dataCollection.saveSelectedList, params)
        .then((res) => {
          let { code, message } = res.data;
          if (code !== 200) {
            this.$message.warning(message);
            return;
          }
          this.$message.success("保存成功！");
          this.setDataSourceId(this.syncDataSourceId);
          this.$emit("changeCurrentTab", "2");
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  watch: {
    conifgBoxIsOpen: {
      handler: function (val) {
        if (val) {
          Object.assign(this.$data, this.$options.data());
          this.syncDataSourceId = this.dataSourceId;
          this.getAllDataSource();
          this.getAllTypeList();
          this.updateSyncList();
        }
      },
      immediate: true,
    },
    currentTab: {
      handler: function (val) {
        if (val == 1) {
          Object.assign(this.$data, this.$options.data());
          this.syncDataSourceId = this.dataSourceId;
          this.getAllDataSource();
          this.getAllTypeList();
          this.updateSyncList();
        }
      },
      immediate: true,
    },
    selectedList: {
      handler: function (val) {
        // this.saveDisabled = val.length ? false : true;
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.el-table {
  border: 1px solid #ebeef5;
}
.table-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .table-item-left,
  .table-item-right {
    width: 45%;
  }
  .table-item-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 300px;
    width: 10%;
    .el-button {
      display: block;
    }
  }
}
.el-dialog {
  min-width: 1050px;
}
.dialog-btn {
  width: 200px;
  display: flex;
  justify-content: space-around;
  margin-bottom: -10px;
}
.el-select {
  width: 100%;
}
.sync {
  /deep/ & > label {
    line-height: 450px;
  }
}
.list-label {
  font-weight: 500;
  font-size: 12px;
}
.transfer-btn {
  padding: 5px 10px;
  font-size: 20px;
}
</style>
